<template>
  <div class="add_hospital_page">
    <div class="nav_bar">
      <div class="back" @click="goBack">
        <span class="el-icon-arrow-left"></span>
        <span>返回</span>
      </div>

      <div class="top_menus">
        <div
          class="menu_cell"
          :class="step == item.id ? 'menu_cell_active' : ''"
          v-for="(item, index) in menus"
          :key="index"
          @click="menuEvent(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>

    <!-- 第一步 基础信息 开始 -->
    <div class="content" v-show="step == 1">
      <el-form
        ref="addForm"
        :model="addForm"
        class="add_form"
        :rules="addFormRules"
        size="small"
        :label-width="labelWidth"
      >
        <el-form-item label="百科名称：" prop="name">
          <el-input v-model.trim="addForm.name" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="关联项目：" prop="projectId">
          <project-select
            v-model="addForm.projectId"
            :multiple="false"
          ></project-select>
        </el-form-item>
        <el-form-item label="图片：" prop="pictures">
          <ImageUpload v-model="addForm.pictures"></ImageUpload>
        </el-form-item>
        <el-form-item label="效果展示：">
          <ImageUpload v-model="addForm.displayEffect" :limit="5"></ImageUpload>
        </el-form-item>
        <el-form-item label="项目简介：" class="long_form_item">
          <el-input
            type="textarea"
            v-model="addForm.projectIntroduce"
            class="a_area"
            rows="3"
            resize="none"
          ></el-input>
        </el-form-item>
        <el-form-item label="项目优点：" class="long_form_item">
          <el-input
            type="textarea"
            v-model.trim="addForm.projectAdvantage"
            class="a_area"
            rows="3"
            resize="none"
          ></el-input>
        </el-form-item>
        <el-form-item label="项目缺点：" class="long_form_item">
          <el-input
            type="textarea"
            v-model.trim="addForm.projectShortcoming"
            class="a_area"
            rows="3"
            resize="none"
          ></el-input>
        </el-form-item>
        <el-form-item label="适应人群：" class="long_form_item">
          <el-input
            type="textarea"
            v-model.trim="addForm.applyCrowd"
            class="a_area"
            rows="3"
            resize="none"
          ></el-input>
        </el-form-item>
        <el-form-item label="禁忌人群：" class="long_form_item">
          <el-input
            type="textarea"
            v-model.trim="addForm.tabooPeople"
            class="a_area"
            rows="3"
            resize="none"
          ></el-input>
        </el-form-item>
        <el-form-item label="参考价格：" class="long_form_item">
          <el-input
            type="textarea"
            v-model.trim="addForm.referencePrice"
            class="a_area"
            rows="3"
            resize="none"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="nextStep">保存，下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第一步 基础信息 end -->

    <!-- 第二步 治疗说明 开始 -->
    <div class="content" v-show="step == 2">
      <el-form
        :model="addForm"
        class="add_form"
        size="small"
        :label-width="labelWidth"
      >
        <el-form-item label="操作时间：">
          <el-input v-model.trim="addForm.operationTime"></el-input>
        </el-form-item>
        <el-form-item label="效果持续：">
          <el-input v-model.trim="addForm.effectLasts"></el-input>
        </el-form-item>
        <el-form-item label="麻醉方式：">
          <el-input v-model.trim="addForm.anestheticMode"></el-input>
        </el-form-item>
        <el-form-item label="治疗周期：">
          <el-input v-model.trim="addForm.treatmentCycle"></el-input>
        </el-form-item>
        <el-form-item label="疼痛程度：">
          <el-input v-model.trim="addForm.painDegree"></el-input>
        </el-form-item>
        <el-form-item label="治疗流程：" class="long_form_item">
          <el-input
            type="textarea"
            v-model.trim="addForm.treatmentProcess"
            class="a_area"
            rows="3"
            resize="none"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="nextStep">保存，下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第二步 治疗说明 end -->

    <!-- 第三步 术后护理 开始 -->
    <div class="content" v-show="step == 3">
      <el-form
        :model="addForm"
        class="add_form"
        size="small"
        :label-width="labelWidth"
      >
        <el-form-item label="术后护理：" class="long_form_item">
          <el-input
            type="textarea"
            v-model.trim="addForm.postoperativeCare"
            class="a_area"
            rows="3"
            resize="none"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="nextStep">保存，下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第三步 术后护理 end -->

    <!-- 第四步 相关材料 开始 -->
    <div class="content" v-show="step == 4">
      <el-form :model="addForm" class="add_form" size="small" label-width="0">
        <el-form-item label="" class="long_form_item">
          <div class="goods_tab">
            <div class="tab_head">
              <div class="tr">
                <div class="th">材料信息</div>
                <div class="th">操作</div>
              </div>
            </div>
            <div class="tab_body">
              <div
                class="tr"
                v-for="(item, index) in addForm.relMaterials || []"
                :key="index"
              >
                <div class="td">
                  <TabMaterial :info="item"></TabMaterial>
                </div>
                <div class="td">
                  <el-link type="danger" @click="removeMaterial(item)"
                    >移除</el-link
                  >
                </div>
              </div>
            </div>
          </div>
          <el-button
            type="primary"
            icon="el-icon-plus"
            plain
            round
            @click="openDialog"
            >选择</el-button
          >
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="nextStep">保存，下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第四步 相关材料 end -->

    <!-- 第四步 平台运营 开始 -->
    <div class="content" v-show="step == 5">
      <el-form
        :model="addForm"
        ref="secondForm"
        :rules="secondFormRules"
        class=""
        size="small"
        :label-width="labelWidth"
      >
        <el-form-item label="上架状态：" class="" prop="onShelf">
          <el-radio-group v-model="addForm.onShelf">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="2">下架可见</el-radio>
            <el-radio :label="0">下架不可见</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="热度值：" class="" prop="hotScore">
          <el-input v-model="addForm.hotScore" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="排序时间：" class="" prop="orderTime">
          <el-date-picker
            v-model="addForm.orderTime"
            type="date"
            class="a_input"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="seo标题：" class="" prop="seoTitle">
          <el-input v-model.trim="addForm.seoTitle" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="seo关键词：" class="" prop="seoKeywords">
          <el-input
            type="textarea"
            v-model.trim="addForm.seoKeywords"
            class="a_area"
            rows="3"
            resize="none"
          ></el-input>
        </el-form-item>
        <el-form-item label="seo描述：" class="" prop="seoDescription">
          <el-input
            type="textarea"
            v-model.trim="addForm.seoDescription"
            class="a_area"
            rows="3"
            resize="none"
          ></el-input>
        </el-form-item>
        <el-form-item label="" class="long_form_item">
          <el-button type="primary" :loading="loading" @click="saveInfo"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 第四步 平台运营 end -->

    <!-- 选择材料弹框 开始 -->
    <ChooseMaterial
      v-model="showPopup"
      v-if="showPopup"
      :list="addForm.relMaterials || []"
      @change="onChange"
    ></ChooseMaterial>
    <!-- 选择材料弹框 end -->
  </div>
</template>
<script>
import ImageUpload from "@/components/upload/index.vue";
import WangEditor from "@/components/wangEditor/index.vue";
import { PLATFORM_OPERATION_RULES } from "@/common/constants";
import {
  BASEURL,
  ADD_BAIKE_INFO,
  EDIT_BAIKE_INFO,
  GET_BAIKE_INFO,
  GET_QUALIFICATION_MATERIAL_SEARCH,
} from "@/http/information";
import { deepClone, showModal, showToast } from "@/common/util";
import ChooseMaterial from "./chooseMaterial.vue";
import TabMaterial from "@/components/material/index.vue";
import { CHECK_NUMBER } from "@/common/validator";
export default {
  components: {
    ImageUpload,
    WangEditor,
    ChooseMaterial,
    TabMaterial,
  },
  data() {
    return {
      menus: [
        { name: "基础信息", id: 1 },
        { name: "治疗说明", id: 2 },
        { name: "术后护理", id: 3 },
        { name: "相关材料", id: 4 },
        { name: "平台运营", id: 5 },
      ],
      step: 1,
      addForm: {},
      labelWidth: "120px",
      addFormRules: {
        name: [{ required: true, message: "请输入百科名称", trigger: "blur" }],
        projectId: [
          { required: true, message: "请选择关联项目", trigger: "change" },
        ],
        pictures: [
          { required: true, message: "请上传图片", trigger: "change" },
        ],
      },
      loading: false,
      secondFormRules: PLATFORM_OPERATION_RULES,
      showPopup: false,
    };
  },
  created() {
    let query = this.$route.query;
    let _rules = PLATFORM_OPERATION_RULES;
    console.log(CHECK_NUMBER)
    _rules.hotScore = [
      { required: true, message: "请输入热度值", trigger: "blur" },
      { validator: CHECK_NUMBER, trigger: "blur" },
    ];
    this.secondFormRules = _rules;
    if (query.id) {
      this.getInfo(query.id);
    }
  },
  methods: {
    // 菜单点击事件
    menuEvent(row) {
      let _this = this;
      let step = this.step;
      if (step == 1) {
        this.$refs.addForm.validate((valid) => {
          if (!valid) {
            return false;
          }
          _this.step = row.id;
        });
        return false;
      }
      this.step = row.id;
    },

    // 返回上一页
    goBack() {
      this.$router.go("-1");
    },

    // 下一步
    nextStep() {
      let _this = this;
      let step = this.step;
      if (step == 1) {
        this.$refs.addForm.validate((valid) => {
          if (!valid) {
            return false;
          }
          _this.step = 2;
        });
        return false;
      }
      _this.step += 1;
    },

    // 获取百科详情
    getInfo(id) {
      let oParams = {};
      oParams.id = id;
      GET_BAIKE_INFO(oParams).then((res) => {
        let obj = res.data || {};

        // 图片
        if (obj.pictures && obj.pictures.length) {
          let arr = [];
          obj.pictures.map((k) => {
            arr.push({
              name: k,
              url: BASEURL + k,
              path: k,
            });
          });
          obj.pictures = arr;
        }

        // 效果展示
        if (obj.displayEffect && obj.displayEffect.length) {
          let arr = [];
          obj.displayEffect.map((k) => {
            arr.push({
              name: k,
              url: BASEURL + k,
              path: k,
            });
          });
          obj.displayEffect = arr;
        }

        //delete obj.hotScore
        // delete obj.relMaterials

        this.addForm = obj;
        //this.getMaterial(obj.materialIds)
      });
    },

    // 获取参数
    getParams() {
      let o = deepClone(this.addForm);

      // 图片
      if (o.pictures && o.pictures.length) {
        let arr = [];
        o.pictures.map((k) => {
          arr.push(k.path);
        });
        o.pictures = arr;
      }

      // 效果展示
      if (o.displayEffect && o.displayEffect.length) {
        let m = [];
        o.displayEffect.map((k) => {
          m.push(k.path);
        });
        o.displayEffect = m;
      }

      // 材料
      if (o.relMaterials && o.relMaterials.length) {
        let relMaterials = [];
        o.relMaterials.map((k) => {
          relMaterials.push(k.id);
        });
        o.materialIds = relMaterials;
      } else {
        o.materialIds = [0];
      }

      delete o.relMaterials;
      return o;
    },

    // 保存信息
    saveInfo() {
      let _this = this;
      let query = _this.$route.query;
      this.$refs.secondForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = _this.getParams();
        let callBack = ADD_BAIKE_INFO;
        let msg = "新增成功";
        console.log(oParams);
        _this.loading = true;

        // 编辑
        if (query.id) {
          oParams.id = query.id;
          callBack = EDIT_BAIKE_INFO;
          msg = "编辑成功";
        }

        // 新增、编辑
        callBack(oParams).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: msg,
              type: "success",
            });
            _this.goBack();
          }
        });
      });
    },

    // 打开弹框
    openDialog() {
      this.showPopup = true;
    },

    // 监听材料选择
    onChange(e) {
      console.log(e);
      //this.$set(this.addForm, 'materialIds', e)
      this.$set(this.addForm, "relMaterials", e);
    },

    // 删除材料
    removeMaterial(row) {
      let _this = this;
      showModal({
        message: "确认删除该材料吗？",
        showCancelButton: true,
        type: "warning",
        success: function () {
          let list = _this.addForm.relMaterials || [];
          let arr = list.filter((k) => k.id != row.id);
          _this.$set(_this.addForm, "relMaterials", arr);
        },
      });
    },

    // 获取材料信息
    getMaterial(ids) {
      if (!ids || ids.lengt <= 0) {
        return false;
      }
      let _this = this;
      let oParams = {};
      oParams.pageNumber = 1;
      oParams.pageSize = 10000;
      oParams.materialIds = ids.toString();
      GET_QUALIFICATION_MATERIAL_SEARCH(oParams).then((res) => {
        let obj = res.data || {};
        let list = obj.list || [];
        _this.$set(_this.addForm, "materialIds", list);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/addHospital.scss";
</style>